<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./font_4765172_os1q3nbeptk/iconfont.js"></script>
    <link rel="stylesheet" href="./css/platformmall.css"> 
    <title>bilibili会员购</title>
</head>
<body>
<div class="bili-header__bar" >
    <ul class="left-entry">
        <li >
            <a href="file:///D:/web/billbill%E5%A4%A7%E4%BD%9C%E4%B8%9A/index.html" class="entry-title">
                <svg class="icon" aria-hidden="true" width="18" height="18" viewBox="0 0 18 18">
                    <use xlink:href="#icon-dsj"></use>
                </svg>                          
                <span>首页</span>
            </a>
        </li>
        <li class="v-popover-wrap">
            <a href="" class="default-entry">
                <span>番剧</span>
            </a>
        </li>
        <li class="v-popover-wrap">
            <a href="" class="default-entry">
                <span>直播</span>
            </a>
        </li>
        <li class="v-popover-wrap">
            <a href="" class="default-entry">
                <span>游戏中心</span>
            </a>
        </li>
        <li class="v-popover-wrap">
            <a href="platform.html" class="default-entry">
                <span>会员购</span>
            </a>
        </li>
        <li class="v-popover-wrap">
            
            <a href="" class="default-entry">
                <span>漫画</span>
            </a>
        </li>
        <li class="v-popover-wrap">
            <a href="" class="default-entry">
                <span>赛事</span>
            </a>
        </li>
        <li >
            <a href="" class="download-entry download-client-trigger">  
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiazai3"></use>
                    </svg>   
                <span>下载客户端</span>
            </a>
        </li>
    </ul>
    <div class="center-search-container">
            <div class="nav-searchform">
                <div class="nav-search-content">
                    <input type="text" placeholder="活动、嘉宾、场馆" />
                </div>
                <div class="nav-search-btn">
                    <svg class="icon-searchBtn" aria-hidden="true">
                        <use xlink:href="#icon-heiseBzhandaohangtubiao-lunkuohuamiaobian-02"></use>
                    </svg>      
                </div>
            </div>    
    </div>
    <ul class="right-entry">
        <div class="user-left">
            <div class="carmer">
                <img
                src="./img/index/seele.jpg"
                width="36px"
                height="36px"
                alt=""
                />
            </div>
        </div>
        <div class="user-mid">
            <a href="#" class="user-ui">
                <svg class="icon " aria-hidden="true">
                    <use xlink:href="#icon-dingdanzhongxin1"></use>
                </svg>
                <span>订单中心</span>
            </a>
        </div>
    </ul>
</div>
<div class="tab">
    <div class="t-title">   
        <p id="link1">漫展演出</p>
        <p id="link2"class="active">B站周边</p>
    </div>
    <div class="timg"><img src="./img/pkatformmall/10001.jpg"></div>
    <div class="product-list"></div>
    <div class="whole-pagination-wrapper">
        <span class="page-control prev">&lt;</span>
        <span class="page-number active">1</span>
        <span class="page-number">2</span>
        <span class="page-number">3</span>
        <span class="page-control next">&gt;</span>
    </div>
</div>
<footer>
    <div class="end-wrapepr">
      <div class="end-header">
        <div style="border-right: 1px solid #eeeeee; margin-right: 35px">
          <h2 class="end-title">bilibili</h2>
          <ul class="aboutSection">
            <li>关于我们</li>
            <li>友情链接</li>
            <li>联系我们</li>
            <li>隐私政策</li>
            <li>用户协议</li>
            <li>bilibili认证</li>
            <li>加入我们</li>
            <li>investor Relation</li>
          </ul>
        </div>
        <div style="border-right: 1px solid #eeeeee; width: 45%">
          <h2 class="end-title">传送门</h2>
          <ul class="aboutSection s-2">
            <li>协议汇总</li>
            <li>帮助中心</li>
            <li>名人堂</li>
            <li>活动中心</li>
            <li>用户反馈论坛</li>
            <li>MCN管理中心</li>
            <li>活动专题页</li>
            <li>壁纸站</li>
            <li>高级弹幕</li>
            <li>侵权申诉</li>
            <li>广告合作</li>
            <li>企业号官网</li>
          </ul>
        </div>
        <div class="downloadWrapper">
          <ul class="download">
            <li class="download-app">
              <div class="dicon-wrapper">
                <svg class="dicon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
              </div>
              <p>下载APP</p>
            </li>
            <li class="sina-weibo">
              <div class="dicon-wrapper">
                <svg class="dicon" aria-hidden="true">
                  <use xlink:href="#icon-xinlangweibo"></use>
                </svg>
              </div>
              <p>新浪微博</p>
            </li>
            <li class="weixin">
              <div class="dicon-wrapper">
                <svg class="dicon" aria-hidden="true">
                  <use xlink:href="#icon-weixin15"></use>
                </svg>
              </div>
              <p>官方微信</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
<script>
        document.getElementById('link1').addEventListener('click', function() {
            window.location.href = 'platform.html'; 
        });

        document.getElementById('link2').addEventListener('click', function() {
            window.location.href = 'platformmall.html'; 
        });
        window.addEventListener('scroll', function() {
            var header = document.querySelector('.bili-header__bar');
            var scrollPosition = window.scrollY;

            if (scrollPosition > 100) {  
                header.classList.add('sticky');  
            } else {
                header.classList.remove('sticky');  
            }
        });

        const productData = [
            { imgSrc: "./img/pkatformmall/goods/10001.png", title: "哔哩哔哩 BW2023主题T恤 A款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10002.png", title: "bilibiliGoods 哔哩哔哩 小电视 小号抱枕 基础款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10003.png", title: "BilibiliWorld BW2024 2233 毛绒公仔15cm", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10004.png", title: "BilibiliWorld BW2024 2233 晴天娃娃毛绒挂件", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10005.png", title: "BilibiliWorld BW2024 2233 毛绒手机背夹包", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10006.png", title: "哔哩哔哩 BW2023主题T恤 A款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10007.png", title: "bilibiliGoods 哔哩哔哩 小电视 小号抱枕 基础款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10008.png", title: "BilibiliWorld BW2024 2233 毛绒公仔15cm", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10009.png", title: "BilibiliWorld BW2024 2233 晴天娃娃毛绒挂件", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10010.png", title: "BilibiliWorld BW2024 2233 毛绒手机背夹包", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10011.png", title: "哔哩哔哩 BW2023主题T恤 A款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10016.png", title: "bilibiliGoods 哔哩哔哩 小电视 小号抱枕 基础款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10017.png", title: "BilibiliWorld BW2024 2233 毛绒公仔15cm", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10018.png", title: "BilibiliWorld BW2024 2233 晴天娃娃毛绒挂件", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10019.png", title: "BilibiliWorld BW2024 2233 毛绒手机背夹包", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10020.png", title: "哔哩哔哩 BW2023主题T恤 A款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10021.png", title: "bilibiliGoods 哔哩哔哩 小电视 小号抱枕 基础款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10022.png", title: "BilibiliWorld BW2024 2233 毛绒公仔15cm", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10023.png", title: "BilibiliWorld BW2024 2233 晴天娃娃毛绒挂件", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10024.png", title: "BilibiliWorld BW2024 2233 毛绒手机背夹包", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10001.png", title: "哔哩哔哩 BW2023主题T恤 A款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10002.png", title: "bilibiliGoods 哔哩哔哩 小电视 小号抱枕 基础款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10003.png", title: "BilibiliWorld BW2024 2233 毛绒公仔15cm", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10004.png", title: "BilibiliWorld BW2024 2233 晴天娃娃毛绒挂件", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10005.png", title: "BilibiliWorld BW2024 2233 毛绒手机背夹包", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10001.png", title: "哔哩哔哩 BW2023主题T恤 A款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10002.png", title: "bilibiliGoods 哔哩哔哩 小电视 小号抱枕 基础款", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10003.png", title: "BilibiliWorld BW2024 2233 毛绒公仔15cm", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10004.png", title: "BilibiliWorld BW2024 2233 晴天娃娃毛绒挂件", price: 125 },
            { imgSrc: "./img/pkatformmall/goods/10005.png", title: "BilibiliWorld BW2024 2233 毛绒手机背夹包", price: 125 }
           
        ];

      
        function createProductCardHTML(product) {
            return `
                <div class="product-cards">
                    <img src="${product.imgSrc}" alt="商品图片">
                    <p class="product-title">${product.title}</p>
                    <div class="product-price">
                        <div class="unit">￥</div>
                        <div class="value">${product.price}</div>
                    </div>
                </div>
            `;
        }

        const productWrapper = document.querySelector(".product-list");

        
        const itemsPerPage = 20; // 每页显示8个商品
        let currentPage = 1;    // 当前页

        function renderProducts(page) {
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            productWrapper.innerHTML = ""; // 清空内容

            productData.slice(start, end).forEach(product => {
                productWrapper.innerHTML += createProductCardHTML(product);
            });
        }

        // 渲染分页组件
        function renderPagination(totalItems) {
            const totalPages = Math.ceil(totalItems / itemsPerPage);
            const paginationWrapper = document.querySelector(".whole-pagination-wrapper");
            paginationWrapper.innerHTML = `
                <span class="page-control prev">&lt;</span>
            `;

            for (let i = 1; i <= totalPages; i++) {
                paginationWrapper.innerHTML += `
                    <span class="page-number ${i === currentPage ? "active" : ""}">${i}</span>
                `;
            }

            paginationWrapper.innerHTML += `
                <span class="page-control next">&gt;</span>
            `;

            // 添加事件
            document.querySelectorAll(".page-number").forEach(el => {
                el.addEventListener("click", () => {
                    currentPage = parseInt(el.textContent);
                    renderProducts(currentPage);
                    renderPagination(totalItems);
                });
            });

            document.querySelector(".prev").addEventListener("click", () => {
                if (currentPage > 1) {
                    currentPage--;
                    renderProducts(currentPage);
                    renderPagination(totalItems);
                }
            });

            document.querySelector(".next").addEventListener("click", () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    renderProducts(currentPage);
                    renderPagination(totalItems);
                }
            });
        }

        // 初始化渲染第一页和分页
        renderProducts(currentPage);
        renderPagination(productData.length); // 假设 productData 是你的商品数据
    </script>
</script>
</body>
</html>